<template>
  <p>value add：{{ msg }} <=>
    dv:{{ dv }}
    <button @click="incre">value add</button>
  </p>
  <p>
    <Hh></Hh>
  </p>
  <p>
    {{ userStore.username }} <=> {{ userStore.age }}
    <button @click="log2">pinia value</button>
  </p>
  <p>
    <router-link to="/">Home</router-link>
    <=>
    <router-link to="/gg">to Gg</router-link>
    <=>
    <router-view></router-view>
  </p>

</template>

<script setup>
import Hh from '../moudle/Hh.vue';
import {computed, onMounted, onUnmounted, onUpdated, provide, ref, watch} from 'vue';

import {useUserStore} from '../stores/user.js';

const userStore = useUserStore();

provide('key', 456)

const log2 = () => {
  console.log(userStore.userInfo)
  userStore.updateUsername("asdsdadasd")
  console.log(userStore.userInfo)
}

const msg = ref(0)
const incre = () => {
  msg.value++
  // console.log(msg.value)
}

// watch(msg,(newV,oldV)=>{
//   console.log(msg.value,"  ",oldV,"-->",newV)
// })

const dv = computed(() => msg.value * 2)

// onMounted(()=>{
//   console.log("onMounted")
// })
// onUpdated(()=>{
//   console.log("onUpdated")
// })
// onUnmounted(()=>{
//   console.log("onUnmounted")
// })


</script>
